<template>
  <div>
    <van-sticky>
      <div class="navbar">
        <van-icon class="navcross" name="arrow-left" @click="goBack" />
        <span class="nav-title">严选商城</span>
      </div>
    </van-sticky>
    <van-tabs @click="ChangeCateGoryListData" v-model="active">
      <van-tab
        v-for="item in categoryList"
        :title="item.name"
        :key="item.id"
      ></van-tab>
    </van-tabs>
    <div class="title_desc">
      <h2>{{ name }}</h2>
      <p>{{ frontDesc }}</p>
    </div>
    <Product :name="name" />
    <BackTop />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import Product from '@/components/Product';
import BackTop from '@/components/BackTop';
export default {
  data() {
    return {
      active: 0,
      brotherCategory: {
        餐厨: "爱，囿于厨房",
        居家: "回家，放松身心",
        配件: "配角，亦是主角",
        服装: "贴身的，要亲肤",
        洗护: "亲肤之物，严选天然",
        婴童: "爱，从心开始",
        杂货: "解忧，每个烦恼",
        饮食: "好吃，高颜值美食",
        志趣: "周边精品，共享热爱",
      },
      name: "",
      frontDesc: "",
    };
  },
  components: {
    Product,
    BackTop,
  },
  mounted() {
    this.$store.dispatch("getHomeDB");
    this.ChangeCateGoryListData(null, "居家")
  },
  methods: {
    //改变选择的商品分类
    ChangeCateGoryListData(name, title) {
      let categorys = this.brotherCategory 
      for (let key in categorys) {
        if (key == title) {
          this.frontDesc = categorys[key];
          this.name = key;
        }
      }
    },
    goBack() {
      this.$router.push("/home");
    },
  },
  computed: {
    ...mapGetters(["categoryList"]),
  },
};
</script>
 
<style lang = "less" scoped>
.navbar {
  position: relative;
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  height: 0.45rem;
  line-height: 0.45rem;
}
.navcross {
  position: absolute;
  padding-left: 0.2rem;
  margin-top: 0.13rem;
  color: darkred;
  font-size: 0.2rem;
}
.nav-title {
  display: block;
  font-size: 0.18rem;
  text-align: center;
}

.title_desc {
  text-align: center;
  background: #fff;
  h2 {
    font-size: 18px;
    height: 50px;
    line-height: 50px;
  }
  p {
    height: 30px;
    line-height: 30px;
    color: #666;
  }
}
</style>
